<template>
	<view>
		<u-popup v-model="show" mode="center" mask-close-able border-radius="30" close-icon-size="36" @close="close">
			<view class="popup-container">
				<view class="content">
					<view class="qrcode-wrap u-f-ajc" v-if="show"> 
						<l-painter ref="painter" width="550rpx" height="650rpx" /></view>
					<view class="title save" @tap="saveEvent">保存到手机</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import lPainter from '@/components/lime-painter/index.vue'; 
import { base64ToPath } from '@/components/lime-painter/utils.js';
export default {
	components: { lPainter },
	props: {
		codeUrl: {
			type: String,
			default: ''
		},  
		macName: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			show: false,
			src: '',
			canTap: false,
			board: {
				width: '600rpx',
				height: '600rpx',
				background: '#ffffff',
				views: [ 
					{
						type: 'qrcode',
						text: '',
						css: {
							left: '25rpx',
							top: '10rpx',
							width: '500rpx',
							height: '500rpx',
							color: '#000000',
							backgroundColor: '#ffffff',
							border: '20rpx solid rgba(25,137,250,.1)',
							
						}
					},
					{
						type: 'text',
						text: `设备编号: ${this.macName}`,
						css: {
							maxLines: 2,
							width: '550rpx',
							color: '#333333',
							left: '0rpx',
							top: '540rpx',
							fontSize: '30rpx',
							lineHeight: '50rpx',
							textAlign: 'center',
							fontWeight: '600'
						}
					},
					
				]
			}
		};
	},
	mounted() {
		
	},
	methods: {
		open() {
			this.show = true;
			this.$set(this.board.views[0],'text',this.codeUrl);
			this.$set(this.board.views[1],'text',`设备编号: ${this.macName}`);
			this.$nextTick(function(){
				this.painter = this.$refs.painter;
				this.painter.render(this.board);
			})
			
		},
		close() {
			this.show = false;
			this.$emit('closeEvent');
			console.log('关闭');
		},
		saveEvent() {
			this.painter.canvasToTempFilePath().then(res => {
				this.$emit('saveEvent', res.tempFilePath);
			});
		},
	}
};
</script>

<style lang="scss">
.popup-container {
	width: 550rpx;
	height: 740rpx;
	background-color: #ffffff;
	display: flex;
	position: relative;

	.content {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title {
			color: #333;
			font-size: 36rpx;
			margin: 45rpx 0;
			text-align: center;
		}
		.save {
			position: absolute;
			bottom: 30rpx;
			margin: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #ff9239;
		}
	}

	.qrcode-wrap {
		background-color: #ffffff;
		width: 100%;
		margin-top: 40rpx;
		.qrcode {
			width: 414rpx;
			height: 414rpx;
			flex-shrink: 0;
		}
	}
}
</style>
